<template>
    <div class="vcomponent">
        <h2>Vue.component</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称。<br>
            同一个名称的多个组件之间，是相互独立的。<br>
            原因就存在于data的写法，这里的data是一个函数，而不是一个对象<br>
            组件的每次更新，都是一个独立的VC实例，这样就保证到每个组件的数据是互相独立的。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo
        </el-tag>
        <p class="decr" style="color: red;">
            用这种方式注册的组件，需要用完整版的vue。<br>
            而@vue/cli中默认引入的是runtime-only版本的vue（相当于阉割版），<br>
            本案例可能无法展示。<br>
            可查看示例代码，了解用法。
        </p>
        <el-tag>
            <a 
                href="https://cn.vuejs.org/v2/guide/components.html" 
                target="_blank" 
                style="color: #333"
                >
                同时，还可以查看详细的官方文档，点击查看
            </a>
        </el-tag>
        <!-- <div id="btn1">
            <button-counter></button-counter>
        </div> -->
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

// 注册全局组件
// runtime-only版本的vue，无法展示该案例。需要在完整版vue中展示
// @vue/cli默认是runtime-only版本的vue
// import Vue from 'vue';
// Vue.component('button-counter', {
//     data() {
//         return {
//             count: 0
//         }
//     },
//     template: '<button @click="count++">click {{ count }} times.</button>'
// })

// new Vue({
//     el: '#btn1'
// })

export default {
    name: 'Vcomponent',
    mixins: [mixinPage],
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>